<template>
	<view class="bigbox">
		<!-- 本月任务 -->
		<view class="content">
			<view class="fot1">本月任务</view>
			<view class="circleprogress">
				<view class="progresstext">{{ progresstext }}%</view>
				<view class="wrapper"><view class="leftprogress" :style="{ transform: leftprogress }"></view></view>
				<view class="wrapper"><view class="rightprogress" :style="{ transform: rightprogress }"></view></view>
			</view>
		</view>
		<!--  -->
		<view class="box1">
			<view>
				<view>目标销量</view>
				<view class="box1_1">
					2000
					<text style="font-size: 28rpx;">辆</text>
				</view>
			</view>
			<view>
				<view>已完成</view>
				<view class="box1_1">
					2000
					<text style="font-size: 28rpx;">辆</text>
				</view>
			</view>
			<view>
				<view>近期完成率</view>
				<view class="box1_1">
					2000
					<text style="font-size: 28rpx;">%</text>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="box2">
			<view class="box2_1"><image src="../../static/89.png" mode=""></image></view>
			<view>完成率=完成数/目标总数,按月汇总</view>
		</view>
		<view class="fot2">以上数据可作为销量预测参考条件</view>
		<view class="line"></view>
		<!-- 趋势分析 -->
		<view class="box3">
			<view class="box3_title">
				<view class="line1"></view>
				<view>趋势分析</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
				 <!-- @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" -->
			</view>
		</view>
	</view>
</template>

<script>
import uCharts from '../../component/u-charts/u-charts.js';
import { isJSON } from '../../common/checker.js';
var _self;
var canvaLineA = null;
var lastMoveTime = null; //最后执行移动的时间戳
export default {
	data() {
		return {
			leftprogress: 'rotate(-45deg)',
			rightprogress: 'rotate(45deg)',
			progresstext: '0',
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			textarea: '',
			Interactive: '' //交互显示的数据
		};
	},
	onLoad() {
		this.sliderchange(500);
		_self = this;
		//#ifdef MP-ALIPAY
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});
		//#endif
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		this.getServerData();
	},
	methods: {
		getServerData() {
			uni.request({
				url: 'https://www.ucharts.cn/data.json',
				data: {},
				success: function(res) {
					console.log(res.data.data,999);
					let LineA = { categories: [], series: [] };
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					LineA.categories = res.data.data.LineA.categories;
					LineA.series = res.data.data.LineA.series;

					//第二根线为虚线的设置
					LineA.series[1].lineType = 'dash';
					LineA.series[1].dashLength = 10;
					_self.textarea = JSON.stringify(res.data.data.LineA);
					_self.showLineA('canvasLineA', LineA);
				},
				fail: () => {
					_self.tips = '网络错误，小程序端请检查合法域名';
				}
			});
		},
		showLineA(canvasId, chartData) {
			canvaLineA = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
				colors: ['#facc14', '#f04864', '#8543e0', '#90ed7d'],
				fontSize: 11,
				padding: [15, 15, 0, 15],
				legend: {
					show: true,
					padding: 5,
					lineHeight: 11,
					margin: 0
				},
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					dashLength: 8
					//disableGrid:true
				},
				yAxis: {
					gridType: 'dash',
					gridColor: '#CCCCCC',
					dashLength: 8
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					line: {
						type: 'straight'
					}
				}
			});
		},
		// touchLineA(e) {
		// 	lastMoveTime = Date.now();
		// },
		// moveLineA(e) {
		// 	let currMoveTime = Date.now();
		// 	let duration = currMoveTime - lastMoveTime;
		// 	if (duration < Math.floor(1000 / 60)) return; //每秒60帧
		// 	lastMoveTime = currMoveTime;

		// 	let currIndex = canvaLineA.getCurrentDataIndex(e);
		// 	if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
		// 		let riqi = canvaLineA.opts.categories[currIndex];
		// 		let leibie = canvaLineA.opts.series[0].name;
		// 		let shuju = canvaLineA.opts.series[0].data[currIndex];
		// 		this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
		// 	}
		// 	canvaLineA.showToolTip(e, {
		// 		format: function(item, category) {
		// 			return category + ' ' + item.name + ':' + item.data;
		// 		}
		// 	});
		// },
		// touchEndLineA(e) {
		// 	let currIndex = canvaLineA.getCurrentDataIndex(e);
		// 	if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
		// 		let riqi = canvaLineA.opts.categories[currIndex];
		// 		let leibie = canvaLineA.opts.series[0].name;
		// 		let shuju = canvaLineA.opts.series[0].data[currIndex];
		// 		this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
		// 	}
		// 	canvaLineA.touchLegend(e);
		// 	canvaLineA.showToolTip(e, {
		// 		format: function(item, category) {
		// 			return category + ' ' + item.name + ':' + item.data;
		// 		}
		// 	});
		// },
		// changeData() {
		// 	if (isJSON(_self.textarea)) {
		// 		let newdata = JSON.parse(_self.textarea);
		// 		canvaLineA.updateData({
		// 			series: newdata.series,
		// 			categories: newdata.categories
		// 		});
		// 	} else {
		// 		uni.showToast({
		// 			title: '数据格式错误',
		// 			image: '../../../static/images/alert-warning.png'
		// 		});
		// 	}
		// },
		sliderchange: function(e) {
			// console.log(event)
			// var val = event.detail.value;
			var val = e / 10;
			this.progresstext = val;
			var deg = (val / 100) * 360;
			if (deg <= 180) {
				this.rightprogress = 'rotate(' + (45 + deg) + 'deg)';
				this.leftprogress = 'rotate(' + -45 + 'deg)';
			} else {
				this.rightprogress = 'rotate(' + (45 + 180) + 'deg)';
				this.leftprogress = 'rotate(' + (-45 + (deg - 180)) + 'deg)';
			}
		}
	}
};
</script>

<style>
.qiun-charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}

.charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}
.line1 {
	width: 8rpx;
	height: 34rpx;
	border-radius: 6rpx;
	background-color: rgba(237, 21, 22, 1);
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0);
	margin-right: 20rpx;
}
.box3_title {
	display: flex;
	align-items: center;
}
.box3 {
}
.line {
	height: 20rpx;
	border-radius: 10rpx;
	background-color: rgba(245, 245, 245, 1);
	color: rgba(16, 16, 16, 1);
	font-size: 28rpx;
	text-align: center;
	font-family: Arial;
	border: 1px solid rgba(255, 255, 255, 0);
	margin: 30rpx 0;
}
.fot2 {
	margin-left: 56rpx;
}
.box2_1 > image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 20rpx;
	vertical-align: middle;
}
.box2 {
	display: flex;
	justify-content: flex-start;
	margin: 30rpx 0;
	color: rgba(219, 219, 219, 1);
	font-size: 28rpx;
	font-family: PingFangSC-regular;
}
.box1_1 {
	color: rgba(16, 16, 16, 1);
	font-size: 56rpx;
	font-family: PingFangSC-bold;
}
.box1 > view > view {
	margin-bottom: 30rpx;
}
.box1 > view {
	width: 33%;
}
.box1 {
	height: 230rpx;
	border-radius: 10rpx;
	background-color: rgba(219, 219, 219, 1);
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0);
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 200rpx;
}
.fot1 {
	margin: 30rpx 0;
	color: rgba(16, 16, 16, 1);
	font-size: 36rpx;
	text-align: left;
	font-family: PingFangSC-regular;
}
.content {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-flow: wrap;
	align-items: center;
	border-radius: 50%;
	text-align: center;
	height: 400upx;
	/* padding-top: 50px; */
}
.circleprogress {
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: center;
}
.circleprogress .progresstext {
	position: absolute;
	font-size: 40px;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: #008000;
}
.circleprogress .wrapper {
	width: 100px;
	height: 200px;
	overflow: hidden;
}
.circleprogress .leftprogress,
.rightprogress {
	width: 200px;
	height: 200px;
	border: 20px solid green;
	border-bottom: 20px solid #7ef22e;
	border-radius: 50%;
}
.circleprogress .leftprogress {
	border-right: 20px solid #7ef22e;
}
.circleprogress .rightprogress {
	border-left: 20px solid #7ef22e;
	margin-left: -100px;
}
.section {
	width: 80%;
	margin-top: 50px;
}
.bigbox {
	padding: 0rpx 30rpx;
	box-sizing: border-box;
}
</style>
